<template>
	<view class="m30">
		<view class="bgFff search-box flex-jus p10 pore">
			<u-search placeholder="搜索" v-model="queryParams.queryValue" :focus="focus" clearabled bgColor="#fff" :showAction="false"
				@search="enterSearch" @clear="clearData"></u-search>
		</view>
		<view class="history mt20" v-if="historyList.length > 0">
			<view class="flex-jus">
				<text class="f28 c343 bold">历史搜索</text>
				<view @click="delHistory">
					<u-icon name="trash" color="#34314F" size="20"></u-icon>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="flex flex-wrap">
				<view class="history-item" v-for="(item,index) in historyList" :key="index">
					<u-button shape="circle" color="#FEEAD7" size="mini" @click="historyItemclick(item)"
						:customStyle="{'height':'50rpx','color':'#34314F'}">{{item}}</u-button>
				</view>
			</view>
		</view>
		<view class="store-list-wrap">
			<x-skeleton type="list" :loading="loading">
				<view class="store-list" v-if="listData.length">
					<view class="store-item" v-for="store in listData" :key="store.id">
						<view class="store-logo">
							<image class="store-logo-img" :src="api_host + store.storeIcon" mode=""></image>
						</view>
						<view class="store-info">
							<view class="store-name s_1">{{ store.title }}</view>
							<view class="store-desc s_1">{{ store.storeBlurb }}</view>
							<view class="store-addr">
								<view class="store-distance">
									<view class="distance">
										距你直线{{ store.distance || 0 }}km
									</view>
									<view class="address s_1">{{ store.storeAddr }}</view>
								</view>
								<view class="store-operate">
									<image class="operation-img tel" @tap="handleCall(store)"
										src="https://hxs.dsjhs.com:553/prod-api/profile/dianhua.png" mode="">
									</image>
									<image class="operation-img nav" @tap="callouttap(store)"
										src="https://hxs.dsjhs.com:553/prod-api/profile/ditudaohang.png" mode="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="no-data">
					<text>暂无数据</text>
				</view>
			</x-skeleton>
		</view>
	</view>
</template>

<script>
	import {
		queryTitle,
		searchAllsite
	} from '@/common/api_user.js'

	import mixin from './mixin.js'
	export default {
		name: '',
		mixins: [mixin],
		data() {
			return {
				loading: false,
				historyList: []
			}
		},
		onLoad(option) {
			this.queryParams.latitude = option.latitude
			this.queryParams.longitude = option.longitude
			this.historyList = uni.getStorageSync('storeHistoryList') ? JSON.parse(uni.getStorageSync('storeHistoryList')) : []
		},
		onReady() {

		},

		methods: {
			historyItemclick(item) {
				this.queryParams.pageNum = 1
				this.queryParams.queryValue = item
				this.getSearchData()
			},
			delHistory() {
				this.historyList = []
				uni.removeStorageSync('storeHistoryList')
			},

			enterSearch() {
				if (!this.queryParams.queryValue) {
					uni.showToast({
						title: '请输入关键词搜索',
						icon: 'none'
					})
					return false
				}
				if (this.historyList.length < 10) {
					let hasText = this.historyList.some(item => item == this.queryParams.queryValue)
					if (!hasText) {
						this.historyList.push(this.queryParams.queryValue)
					}
					uni.setStorageSync('storeHistoryList', JSON.stringify(this.historyList))
				}
				this.getSearchData()
			},
			
			getSearchData() {
				this.loading = true
				this.listData = []
				this.queryParams.pageSize = 999
				this.getList()
			}

		}
	}
</script>

<style lang="scss">
	.history-item {
		margin: 1%;
	}

	.search-box {
		border-radius: 50rpx;
	}

			.store-list {
				margin-top: 24rpx;

				.store-item {
					display: flex;
					width: 100%;
					padding: 20rpx;
					margin-bottom: 24rpx;
					background: #FFFFFF;
					border-radius: 20px;
					box-sizing: border-box;

					.store-logo {
						flex: 0 0 96px;
						height: 96px;
						border-radius: 24rpx;
						overflow: hidden;

						.store-logo-img {
							width: 96px;
							height: 96px;
						}
					}

					.store-info {
						position: relative;
						flex: auto;
						margin-left: 20rpx;
						padding-top: 4rpx;

						.store-name {
							margin-bottom: 4rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #34314F;
							line-height: 22px;
							text-align: left;
						}

						.store-desc {
							max-width: 430rpx;
							padding-bottom: 8rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #34314F;
							line-height: 36rpx;
							text-align: left;

						}

						.store-addr {
							// position: absolute;
							// bottom: -8rpx;
							// right: 0;
							width: 100%;
							display: flex;
							justify-content: space-between;
							padding-top: 16rpx;
							border-top: 1px solid rgba(52, 49, 79, 0.08);

							.distance {
								margin-top: 6rpx;
								margin-bottom: 6rpx;
								font-weight: 600;
								font-size: 26rpx;
								color: #FF7F1C;
								line-height: 18px;
								text-align: left;
								font-style: normal;
							}

							.address {
								max-width: 246rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #34314F;
								line-height: 16px;
								text-align: left;
								font-style: normal;
							}

							.store-operate {
								display: flex;

								.operation-img {
									display: block;
									width: 84rpx;
									height: 84rpx;

									&.tel {
										margin-right: 20rpx;
									}
								}

							}
						}
					}
				}
			}
			
	//单行
	.s_1 {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		max-width: 200px;
		/* 设置最大宽度以限制文本的显示长度 */
	}


	//多行

	.s_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>